<template>
  <div class="chat-test-container">
    <h2>聊天组件弹窗测试</h2>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="showWsChatDialog">测试 WsChat 弹窗</el-button>
      <el-button type="success" @click="showWsChatNewDialog">测试 WsChatNew 弹窗</el-button>
    </div>
    
    <!-- WsChat 弹窗 -->
    <el-dialog 
      title="旧版聊天弹窗测试" 
      :visible.sync="wsChatVisible" 
      width="80%" 
      height="80%"
      :fullscreen="false"
      :close-on-click-modal="false"
    >
      <div style="height: 90%; overflow: hidden;">
        <ws-chat :opponentId="'1'" />
      </div>
    </el-dialog>
    
    <!-- WsChatNew 弹窗 -->
    <el-dialog 
      title="新版聊天弹窗测试" 
      :visible.sync="wsChatNewVisible" 
      width="80%" 
      height="80%"
      :fullscreen="false"
      :close-on-click-modal="false"
    >
      <div style="height: 90%; overflow: hidden;">
        <ws-chat-new :opponentId="'1'" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WsChat from './WsChat.vue'
import WsChatNew from './WsChatNew.vue'

export default {
  name: 'ChatTest',
  components: {
    WsChat,
    WsChatNew
  },
  data() {
    return {
      wsChatVisible: false,
      wsChatNewVisible: false
    }
  },
  methods: {
    showWsChatDialog() {
      this.wsChatVisible = true
    },
    showWsChatNewDialog() {
      this.wsChatNewVisible = true
    }
  }
}
</script>

<style scoped>
.chat-test-container {
  padding: 20px;
}
</style>